<html>
    <head></head>
    <body>
        <p>请<a href="/crt">下载</a>CA文件并信任，然后设置代理地址为__localIp__，端口5227</p>
        <p><a href="javascript:;" id="clear">清空记录</a></p>
        <ul id="list" style="width:48%;float:left;height:100%;overflow:scroll;">
        </ul>
        <div style="width:48%;float:left;">
            <div id="request" style="background-color: #efefef;height: 50%;overflow:scroll;"></div>
            <div id="response" style="background-color: #dedede;height: 50%;overflow:scroll;"></div>
        </div>
        <script>
            let delimiter;
            let datas = {};
            function clear() {
                document.getElementById('list').innerHTML = '';
                datas = {};
            }
            document.getElementById('clear').addEventListener('click',clear);
            let ws = new WebSocket('ws://__localIp__:5229');
            ws.addEventListener('message',function(ev){
                if(/^delimiter:/.test(ev.data)) {
                    delimiter = ev.data.split(':')[1];
                    return;
                }
                let data = ev.data.split(delimiter);
                if(!datas[data[1]]) {
                    datas[data[1]] = {};
                }
                datas[data[1]][data[0]] = data[3];
                if(data[0] == 'req') {
                    let li = document.createElement('li');
                    li.innerHTML = data[2];
                    li.setAttribute('transid',data[1]);
                    li.addEventListener('click',function(ev){
                        document.getElementById('request').innerHTML = '';
                        document.getElementById('response').innerHTML = '';
                        let transId = this.getAttribute('transid');
                        let {req, res} = datas[transId];
                        if(req) {
                            document.getElementById('request').innerHTML = req;
                        }
                        if(res) {
                            document.getElementById('response').innerHTML = res;
                        }
                    });
                    document.getElementById('list').appendChild(li);
                }
            });
        </script>
    </body>
</html>